<template>
	<view class="container">
		<!-- <web-view class="container" src="http://47.106.185.77:666/"></web-view> -->
		<view class="bcPng">
		</view>
		<view v-if="webviewSrc">
			<web-view class="webContainer" :src="webviewSrc" bindmessage="msgHandler"></web-view>
		</view>
		<view v-else>
			<view class="clanBtn" v-if="treeId" @click="turnToClanTree">
				查看族谱树
			</view>

			<view class="clanBtn" @click="turnSearch" v-else>
				请先选择家族
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		useUserStore,
		useClanTreeStore
	} from '@/store/index.js'
	import {
		onShow,
		onHide,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useClanStore
	} from '@/store/index.js'
	const webviewSrc = ref()
	const useUser = useUserStore();
	const useTreeStore = useClanTreeStore();
	const useClan = useClanStore();
	const UserAccessToken = ref()
	const treeId = ref()
	const changeTree = ref(true)
	const turnSearch = () => {
		console.log("turnSearch")
		uni.redirectTo({
			url: '../../pages/index/search',
		});
	}
	const msgHandler = (e) => [
		console.log(e)
	]

	const turnToClanTree = () => {
		setTimeout(function() {


			webviewSrc.value =
				// `http://localhost:5173/#/pages/tree/tree?treeId=${treeId.value}&UserAccessToken=${UserAccessToken.value}`
				// `http:/47.106.185.77:666/#/pages/tree/tree?treeId=${treeId.value}&UserAccessToken=${UserAccessToken.value}`
				`https://www.zhongyuanlai.cn/#/pages/clanLibrary/clanLibrary`

			console.log(webviewSrc.value)
			wx.hideLoading({
				title: '加载中'
			})
			changeTree.value = false
			useTreeStore.clanTreeChange = changeTree.value
		}, 10);
	}



	onShow(() => {
		changeTree.value = useTreeStore.clanTreeChange
		UserAccessToken.value = useUser.UserAccessToken;
		treeId.value = useTreeStore.clanTreeid;
		treeId.value = useClan.clanId
		console.log(useClan.clanId, "treeIddd")
		// console.log(UserAccessToken.value, treeId.value)
		if (treeId.value) {
			//存在treeId
			if (changeTree.value == true) {
				//刷新web-view
				console.log("changeTree")
				//延时变换,先变成空然后再重新渲染web-view
				setTimeout(function() {
					webviewSrc.value =
						// `http://localhost:5173/#/pages/tree/tree?treeId=${treeId.value}&UserAccessToken=${UserAccessToken.value}`
						// `http:/47.106.185.77:666/#/pages/tree/tree?treeId=${treeId.value}&UserAccessToken=${UserAccessToken.value}`
						`https://www.zhongyuanlai.cn/#/pages/clanLibrary/clanLibrary`

					console.log(webviewSrc.value)
					wx.hideLoading({
						title: '加载中'
					})
					changeTree.value = false
					useTreeStore.clanTreeChange = changeTree.value
				}, 10);
				webviewSrc.value = ''
				wx.showLoading({
					title: '加载中'
				})
			} else {
				//不刷新webview
				console.log("Unchange")
			}
		} else {
			console.log("没有treeId")
			webviewSrc.value = ''
		}
		// console.log(webviewSrc.value)
	})

	onHide(() => {
		webviewSrc.value = ''
	})
</script>

<style lang="scss">
	.bcPng {

		height: 100vh;
		width: 100vw;
		position: fixed;
		z-index: -1;

		&:before {
			opacity: 1;
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			height: 900rpx;
			width: 900rpx;
			-webkit-clip-path: circle(62.8% at 88% 67%);
			clip-path: circle(62.8% at 88% 67%);
			background-color: rgba(255, 102, 0, 0.4);
		}
	}

	.container {
		width: 100vw;
		display: inline-box;
		position: relative;
		display: flex;
		justify-content: center;

		.clanBtn {
			margin-top: 40vh;
			padding: 30rpx;
			border-radius: 12rpx;
			border: none;
			background-color: darkred;
			color: white;
			font-weight: 500;
			font-size: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.webContainer {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			overflow: auto;
			background-color: #fff;
		}
	}
</style>